<template>
  <div class="page-container">
    <div class="page-header">
      <div class="page-tile">
        {{ $t('route.currentSession') }}
      </div>
      <div class="left-wrapper"></div>
      <div class="right-wrapper"></div>
    </div>
    <el-scrollbar class="page-content">
      <div class="content-wrapper">
        <el-card>
          <basic-table
            :pageMethod="(params) => {
              params.search = searchValue;
              params.cloud_tenant_id = AuthModule.authrole === 'tenant_admin' ? AuthModule.cloud_tenant_id : searchTenantId;
              return $pandaApi.apiGetSessions(params);
            }"
          >
            <template #table-options="tableSlotData">
              <div class="table-left-options">
                <el-button class="icon-button setting-button" :loading="tableSlotData.table.loading" 
                  @click="$nextTick(()=>tableSlotData.table.refresh().then(()=>{
                    $message.success($t('common.refreshSuccess'))
                  }).catch(()=>{
                    $message.success($t('common.refreshFail'))
                  }))" style="width: auto;margin-right:10px;"
                >
                  <i v-if="!tableSlotData.table.loading" class="el-icon-refresh" style="font-size: 12px; margin-right: 2px;"></i>
                  <span style="font-size: 12px;">{{ $t("common.refresh") }}</span>
                </el-button>
                <!-- <el-button class="icon-button setting-button" type="primary" style="width: auto;" :disabled="tableSlotData.table.selectRows.length <= 0" @click="batchDisconnectSession(tableSlotData.table.selectRows)">
                  <i class="iconfont iconzhongyiicon_duankai" style="font-size: 12px; margin-right: 5px;"></i>
                  <span style="font-size: 12px;">{{ $t('objectActive.disconnect') }}</span>
                </el-button> -->
              </div>
              <div class="table-right-options">
                <!-- <el-select v-model="searchTenantId" v-if="$store.state.auth.authrole === 'system_admin'" :placeholder="$t('currentSessionManage.pleaseSelectATenant')" @change="selectChange(tableSlotData)" :disabled="tenantSelectLoading" style="width: 200px; margin-right: 10px;" clearable>
                  <el-option
                    v-for="tenant in tenantList"
                    :key="tenant.id"
                    :label="tenant.name"
                    :value="tenant.id">
                  </el-option>
                </el-select> -->
                <!-- <el-input :placeholder="$t('currentSessionManage.search')" v-model="searchValue" @change="tableSlotData.table.refresh">
                  <i slot="prefix" class="el-input__icon el-icon-search"></i>
                </el-input> -->
              </div>
            </template>
            <template #table-column="tableSlotData">
              <!-- <el-table-column type="selection" width="40" align="center"></el-table-column> -->
              <el-table-column
                v-if="authrole && authrole === 'system_admin'"
                prop="cloud_tenant_name"
                :label="$t('common.tenant')">
              </el-table-column>
              <el-table-column
                prop="user_name"
                :label="$t('route.user')">
              </el-table-column>
              <el-table-column
                prop="desktop_client_name"
                :label="$t('currentSessionManage.client')">
              </el-table-column>
              <el-table-column
                prop="desktop_name"
                :label="$t('currentSessionManage.desktop')">
              </el-table-column>
              <el-table-column
                prop="agreement"
                :label="$t('currentSessionManage.agreement')">
                Blast
              </el-table-column>
              <el-table-column
                prop="connected_at"
                :label="$t('currentSessionManage.connectionTime')">
                <template slot-scope="scope">
                  {{ myParseTime(new Date(scope.row.connected_at)) }}
                </template>
              </el-table-column>
              <el-table-column
                prop="duration"
                :label="$t('currentSessionManage.connectionDuration')">
                <template slot-scope="scope">
                  {{ myFormatSeconds(scope.row.duration[0]) }}
                  <!-- {{ myFormatSeconds(((new Date(myParseTime(new Date(scope.row.last_heartbeat)))) - (new Date(myParseTime(new Date(scope.row.connected_at))))) / 1000) }} -->
                </template>
              </el-table-column>
              <el-table-column
                prop="action"
                :label="$t('common.action')">
                <template slot-scope="scope">
                  <el-button type="text" @click="disconnect(scope.row.desktop, scope.row.desktop_pool_id)">{{ $t('objectActive.disconnect') }}</el-button>
                </template>
              </el-table-column>
            </template>
            <template #others-elements="tableSlotData">
              <!-- 断开会话 -->
              <disconnect-current-session ref="disconnectCurrentSession" :disconnect-method="(dataList, id) => $pandaApi.apiDisconnectSessions(dataList, id).then(() => {
                  $message.success($t('currentSessionManage.disconnectSessionSuccess'))
                  tableSlotData.table.refresh();
                }).catch(()=>{
                  $message.error($t('currentSessionManage.disconnectSessionFail'))
                  tableSlotData.table.refresh();
                })">
              </disconnect-current-session>
            </template>
          </basic-table>
        </el-card>
      </div>
    </el-scrollbar>
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
import BasicTable from '../../../components/Basic/Table/BasicTable.vue'
import { parseTime, formatSeconds } from "../../../utils/index"
import disconnectCurrentSession from './disconnect_current_session.vue'
import { AuthModule } from '../../../store/modules/auth';
export default Vue.extend({
  components: {
    BasicTable,
    disconnectCurrentSession
  },
  computed: {
    AuthModule: () => AuthModule
  },
  data() {
    return {
      tableData:[],
      tenantSelectLoading: false,
      searchTenantId: '',
      searchValue:'',
      authrole: AuthModule.authrole
    }
  },
  mounted() {
  },
  methods: {
    selectChange(table: any) {
      table.table.refresh()
    },
    myParseTime(s: any) {
      return parseTime(s);
    },

    myFormatSeconds(s: any) {
      return formatSeconds(s);
    },

    // 批量断开
    batchDisconnectSession(selectRows: any) {
      let param: any = []
      selectRows.map((k: any) => {
        param.push(k.desktop_client_id)
      });
      (this as any).$refs.disconnectCurrentSession.init({
        title: (this as any).$t('common.batch') + (this as any).$t('currentSessionManage.disconnectSession'),
        tip: (this as any).$t('currentSessionManage.batchdisconnect'),
        sessionList: param
      });
    },

    // 行-断开
    disconnect(name: string, id: any) {
      let param = []
      param.push(name);
      (this as any).$refs.disconnectCurrentSession.init({
        title: (this as any).$t('currentSessionManage.disconnectSession'),
        tip: (this as any).$t('currentSessionManage.disconnect'),
        sessionList: param,
        poolId: id
      });
    }
  }
})
</script>
<style lang="scss" scoped>
.page-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #EFF1F4;

  .page-header {
    height: 60px;
    background-color: #FFFFFF;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #D9D9D9;

    .page-tile {
      color: #031129;
      font-size: 16px;
      margin-left: 20px;

      .iconzhongyiicon_gaojing {
        margin-left: 5px;
      }
    }
  }

  .page-content {
    height: calc(100vh - 110px);
    overflow: hidden;
    flex-grow: 1;

    .content-wrapper {
      padding: 15px;
    }
  }
}

.table-left-options {
  display: flex;
}

.table-right-options {
  display: flex;

  .setting-button {
    margin-right: 10px;
  }
}
</style>
